@include('Home.head')
<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">升级为商家</a></li>
        </ol>
    </div>
    <div class="cart-panel">
        <div class="withdrawals-panel">
            <form class="am-form">
                <div class="am-radio up-radio-item" v-for="val in goods">
                    <label>
                        <input type="radio" name="doc-radio-1" v-on:click="level(val)" value="val.id" checked="">
                        @{{ val.goodsname }}
                    </label>
                </div>
            </form>
        </div>
        <div class="my-search-title-panel">
            <p class="my-search-titp-p am-text-sm bold">冷敷贴</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickMinus()"><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" v-model="user.stick" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickAdd()"><i class="am-icon-plus"></i></button>
                </form>
            </div>
            <p class="my-search-titp-p am-text-sm bold">百草液</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidMinus()" ><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" v-model="user.liquid" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidAdd()"><i class="am-icon-plus"></i></button>
                </form>
            </div>
        </div>
        <div class="withdrawals-panel">
            <div class="am-form-group">
                <h3>区域</h3>
                <label class="am-checkbox-inline">
                    <input type="radio" name="radio" v-model="user.area" value="A" data-am-ucheck> A
                </label>
                <label class="am-checkbox-inline">
                    <input type="radio" name="radio" v-model="user.area" value="B" data-am-ucheck> B
                </label>
            </div>
        </div>
        <div class="withdrawals-panel"><span class=" red2">*</span>分享人：<span class="red2"><input type="text" v-model="user.referrer" class="am-form-field am-radius" placeholder="分享人电话"></span></div>
        <div class="withdrawals-panel"><span class=" red2">*</span>节点人：<span class="red2"><input type="text" v-model="user.nodes" class="am-form-field am-radius" placeholder="接点人电话"></span></div>
        <div class="withdrawals-panel"><span class=" red2">*</span>升级为：<span class="red2">会员</span></div>
        <div class="withdrawals-panel"><span class=" red2">*</span>所需费用：<span class="red2">￥@{{user.rulingprice}}</span></div>
        {{--</div>--}}
        <div class="am-form-group am-form-icon">
            <i class="am-icon-user" style="color:#329cd9"></i>
            <input type="text" class="am-form-field  my-radius" v-model="user.name" placeholder="联系人名称">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-phone" style="color:#f09513"></i>
            <input type="text" class="am-form-field  my-radius" v-model="user.phone" placeholder="请输入联系电话">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-lock" ></i>
            <input type="password" class="am-form-field  my-radius" v-model="user.password" placeholder="登录密码 默认联系电话">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-lock" ></i>
            <input type="password" class="am-form-field  my-radius" v-model="user.password_pay" placeholder="支付密码 默认联系电话">
        </div>
        <div class="paoduct-title-panel">
            <p><i class="am-icon-location-arrow"></i> 收货地址</p>
            <form class="am-form am-form-inline">
                <p>
                <div data-toggle="distpicker">
                    <label class="sr-only" for="province1">Province</label>
                    <select id="province1" v-model="user.province" required>
                    </select>
                    <div class="form-group">
                        <label for="city1">City</label>
                        <select class="form-control" id="city1" v-model="user.city" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district1" >District</label>
                        <select class="form-control" id="district1" v-model="user.district">
                        </select>
                    </div>
                </div>
                </p>
                <div class="am-form-group">
                    <input type="text" v-model="user.address" class="am-form-field am-radius" placeholder="详细地址">
                </div>
            </form>
        </div>
        {{--<div class="am-checkbox">--}}
            {{--<label>--}}
                {{--<input type="checkbox"> 我已阅读并同意<a href="#">《协议》</a>--}}
            {{--</label>--}}
        {{--</div>--}}
        <p class="am-text-center"><button type="button" v-if="status == 0" v-on:click="add()" class="am-btn am-btn-danger am-radius" style="border-radius: 50px;">立即升级</button></p>
        <p class="am-text-center"><button type="button" v-if="status == 1" class="am-btn am-btn-danger am-radius" disabled="disabled">注册中..</button></p>
    </div>
    <!--底部-->
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
<script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
<script src="{{ URL::asset('js/address/main.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '注册会员',
            goods: [],
            user:{
                nodes:'', //节点人
                referrer:'', //分享人
                nodes_naem:'',
                area:'',
                name:'',
                phone:'',
                password:'',
                password_pay:'',
                province:'',
                city:'',
                district:'',
                address:'',
                rulingprice:0,
                goodsid:0,//商品id
                stick:0, //冷敷贴
                liquid:0, //百草液
            },
            goodsNum:0, //商品的总共数量
            status:0,
        },
        methods: {
            //获取url
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
            initialize:function () {
                var nodes = this.obtain('nodes');
                var area = this.obtain('area');
                var nodes_naem = this.obtain('name');
                this.user.area = area
                var nodes = "{{session('home_user')->nodes}}";
                if(nodes != 0){
                    this.user.nodes_naem = nodes_naem
                    this.user.nodes = nodes_naem
                }
                this.user.referrer = {{ Session::get('home_user')->phone }}
                $.post("/home/straightShop/goods",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
                    if (res.code) {
                        app.goods = res.data
                        app.user.stick = parseInt(res.data.goods.straight);
                        // app.user.liquid = parseInt(res.data.goods.straight / 2);
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            level:function (val) {
                app.user.rulingprice = val.rulingprice
                app.user.goodsid = val.id
                app.goodsNum = val.straight;
                app.user.stick = parseInt(val.straight);
                app.user.liquid = 0;
                // app.user.liquid = parseInt(val.straight / 2);
            },
            stickAdd:function () { //加冷敷贴
                if( app.user.stick >= app.goodsNum ) {
                    layer.msg('超出了范围');return;
                }
                app.user.stick = app.user.stick+1;
                app.user.liquid = app.user.liquid-1;
            },
            stickMinus:function () { //减
                if(app.user.stick <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.user.stick -= 1;
                app.user.liquid += 1;
            },
            liquidAdd:function () { //加冷敷贴
                if( app.user.liquid >= app.goodsNum) {
                    layer.msg('超出了范围');return;
                }
                app.user.liquid = app.user.liquid+1;
                app.user.stick = app.user.stick-1;
            },
            liquidMinus:function () { //减
                if(app.user.liquid <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.user.stick += 1;
                app.user.liquid -= 1;
            },
            add:function () {
                if(app.goodsNum == 0){
                    layer.msg('请选择代理产品');return;
                }
                if(app.area == ''){
                    layer.msg('请选择区域');return;
                }
                if(app.user.referrer == ''){
                    layer.msg('分享人不能为空');return;
                }
                if(app.user.nodes == ''){
                    layer.msg('节点人不能为空');return;
                }
                if(app.user.name == ''){
                    layer.msg('请选择姓名不能为空');return;
                }
                if(app.user.phone == '' ){
                    layer.msg('请输入正确的手机');return;
                }
                if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(app.user.phone))){
                    layer.msg('请输入正确的手机');return;
                }
                if(app.user.province == ''){
                    layer.msg('请选择省份');return;
                }
                if(app.user.city == ''){
                    layer.msg('请选择市区');return;
                }
                if(app.user.district == ''){
                    // layer.msg('请选择区县');return;
                }
                if(app.user.address == ''){
                    layer.msg('请输入详细地址');return;
                }
                if(app.status == 0){
                    app.status = 1;
                    layer.load(2);
                    $.post("/home/member/enroll",{'_token':'{{csrf_token()}}',users:app.user},function (res) {
                        layer.closeAll('loading');
                        if (res.code) {
                            layer.msg(res.data,{time:500},function () {
                                window.location.href="/home/member/index";
                            });
                        } else {
                            app.status = 0;
                            layer.msg(res.data);
                        }
                    });
                } else {
                    layer.msg('注册中...');return;
                }

            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
